<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../layui/css/layui.css" media="all">
		<link rel="stylesheet" href="../css/comment.style.css" media="all">
		<style type="text/css">
			.wdjjq-box{
				position: absolute;
				width: 100%;
				height: 100%;
			}
			.wdjjq-img{
				position: absolute;
				max-width: 80%;
				max-height: 83%;
			}
			.wdjjq-block{
				position: absolute;
			}
			.block-txt{
				position: absolute;
				display: inline-block;
				width: 29.3%;
				height: 13%;
				text-align: center;
				color: #FFFFFF;
				background: rgba(255,0,0,0);
				font-size: 1rem;
				font-weight: bold;
			}
			#title_txt{
				display: block;
				position: relative;
				font-size: 1.5rem;
				color: #FFFFFF;
				width: 100%;
				text-align: center;
			}
			#tj_txt{left: 6%;top: 40%;}
			#sh_txt{left: 60.8%;top: 35.6%;}
			#fj_txt{left: 33.8%;top: 90.8%;}
			.layui-carousel{
				position: absolute;
				background: rgba(0,0,0,0);
			}
			.layui-carousel>[carousel-item]>* {
			    display: none !important;
			}
		</style>
	</head>
	<body>
		<div class="wel-container">
			<div class="wel-title-box">电力消费指数系统</div>
			<div class="wel-content">
				<div class="wdjjq-box">
					<div class="layui-carousel" id="test1" lay-filter="test1">
					  <div carousel-item id="carousel-item"></div>
					</div>
					<img class="wdjjq-img" src="../images/sdmyq.png" />
					<div class="wdjjq-block">
						<span id="title_txt">三大贸易区</span>
						<span class="block-txt" id="tj_txt"></span>
						<span class="block-txt" id="sh_txt"></span>
						<span class="block-txt" id="fj_txt"></span>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
<script src="../js/jquery-1.10.2.min_65682a2.js"></script>
<script src="../layui/layui.js"></script>
<script type="text/javascript">
	var data=[{"it01":"2020.01:442","it02":"2020.01:2342","it03":"2020.01:2432"},
		{"it01":"2020.02:2434","it02":"2020.02:2432","it03":"2020.02:24334"}];
	for(i in data){
		$("#carousel-item").append('<div></div>');
	}
	;;(function(){
		function setData(item){
			$("#tj_txt").html(item["it01"]);
			$("#sh_txt").html(item["it02"]);
			$("#fj_txt").html(item["it03"]);
		}
		function initView(){
			var cH = $(".wel-container").height();
			var cW = $(".wel-container").width();
			var titleH = $(".wel-title-box").height()+5;
			var contentW = (cW-10),contentH = cH-titleH-15;
			$(".wel-content").css({width:contentW+"px",height:contentH+"px"});
			var imgL = (contentW-$(".wdjjq-img").width())/2;
			var imgT = (contentH-$(".wdjjq-img").height())/2;
			$(".wdjjq-img").css({left:imgL+"px",top:imgT+"px"});
			$(".layui-carousel").css({width:$(".wdjjq-img").width()+"px",height:($(".wdjjq-img").height()+30)+"px",left:imgL+"px",top:imgT+"px"});
			$(".wdjjq-block").css({width:$(".wdjjq-img").width()+"px",height:$(".wdjjq-img").height()+"px",left:imgL+"px",top:imgT+"px"});
			
			setData(data[0])
			layui.use('carousel', function(){
			  var carousel = layui.carousel;
			  //建造实例
			  carousel.render({
			    elem: '#test1',
				width:$(".wdjjq-img").width(),
				height:$(".wdjjq-img").height()+30,
				interval:3000
			  });
			   
			  //监听轮播切换事件
			  carousel.on('change(test1)', function(obj){ //test1来源于对应HTML容器的 lay-filter="test1" 属性值
				var item = data[obj.index];
			    console.log(obj.index,item); //当前条目的索引
				setData(item);
			  });  
			});
		}
		initView();
		window.onresize=function(){
			initView();
	    }
	})();
</script>
